import { useChat } from './hooks/useChat';
import { ModelSelector } from './components/ModelSelector';
import { MessageList } from './components/MessageList';
import { ChatInput } from './components/ChatInput';
import { ChatHistory } from './components/ChatHistory';
import './App.css';

function App() {
  const {
    sessions,
    currentSessionId,
    messages,
    models,
    selectedModel,
    isLoading,
    sendMessage,
    changeModel,
    createNewSession,
    selectSession,
    deleteSession,
  } = useChat();

  return (
    <div className="app">
      <div className="app-main">
        <div className="app-header">
          <ChatHistory
            sessions={sessions}
            currentSessionId={currentSessionId}
            onSelectSession={selectSession}
            onNewChat={createNewSession}
            onDeleteSession={deleteSession}
          />
          <h1 className="app-title">AICortex</h1>
          <ModelSelector
            models={models}
            selectedModel={selectedModel}
            onModelChange={changeModel}
          />
        </div>
        <MessageList messages={messages} isLoading={isLoading} />
        <ChatInput
          onSend={sendMessage}
          disabled={isLoading || !selectedModel}
          placeholder={!selectedModel ? '请先选择模型...' : '输入消息...'}
        />
      </div>
    </div>
  );
}

export default App;
